import React, { Component } from 'react'
import { connect } from 'react-redux'
import {
  incrementAction,
  decrementAction,
  incrementAsyncAction,
} from '../../redux/actions/count'

class Count extends Component {
  increment = () => {
    const { value } = this.selectValue
    this.props.incrementAction(+value)
  }
  decrement = () => {
    const { value } = this.selectValue
    this.props.decrementAction(+value)
  }
  incrementIfOdd = () => {
    const { value } = this.selectValue
    if (this.props.count % 2 === 1) {
      this.props.incrementAction(+value)
    }
  }
  incrementAsync = () => {
    const { value } = this.selectValue
    this.props.incrementAsyncAction(+value, 500)
  }

  render() {
    return (
      <div>
        <h1>Count组件</h1>
        <h2>下方组件人数为：{this.props.person.length}</h2>
        <h2>当前求和为：{this.props.count}</h2>
        <select ref={(val) => (this.selectValue = val)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        &nbsp;&nbsp;
        <button onClick={this.increment}>加</button>&nbsp;&nbsp;
        <button onClick={this.decrement}>减</button>&nbsp;&nbsp;
        <button onClick={this.incrementIfOdd}>奇数加</button>&nbsp;&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>
      </div>
    )
  }
}

export default connect(
  (state) => ({
    count: state.count,
    person: state.person,
  }),
  {
    incrementAction,
    decrementAction,
    incrementAsyncAction,
  }
)(Count)
